<template>
  <Card style="width: 100%;" title="新增">
    <Form name="user" ref="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <Row>
        <Col :span="12">
          <FormItem name="resourceType" label="项目金额">
            <Input placeholder="请输入项目金额" style="width: 100%" />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem name="resourceType" label="项目金额">
            <Input placeholder="请输入项目金额" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem name="resourceIps" label="项目名称">
            <Input placeholder="请输入项目名称" style="width: 100%" />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem name="groupNamed" label="委托单位类型">
             <Select placeholder="资源类型" style="width: 100%">
              <Option label="内部" value="内部" />
              <Option label="公开" value="公开" />
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem name="resourceIpw" label="委托单位">
            <Input placeholder="请输入委托单位" style="width: 100%" />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem name="groupNameh" label="项目类型">
             <Select placeholder="资源类型" style="width: 100%">
              <Option label="内部" value="内部" />
              <Option label="公开" value="公开" />
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem name="resourceIp" label="项目密级">
             <Select placeholder="资源类型" style="width: 100%">
              <Option label="内部" value="内部" />
              <Option label="公开" value="公开" />
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="24">
          <FormItem name="resourceIp" label="项目描述" :labelCol="labelColW" :wrapperCol="wrapperColW">
             <TextArea
              placeholder="请输入"
              style="width: 100%"
              allowClear
              @input="onInput"
            />
          </FormItem>
        </Col>
        源应用信息
      </Row>
      <Row>
        <Col :span="12">
          <FormItem name="resourceIp" label="应用名称">
            <Input placeholder="请输入应用名称" style="width: 100%" />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem name="groupName" label="数据量大小">
            <Input placeholder="数据量大小" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem name="resourceIp" label="应用架构">
            <Input placeholder="请输入应用架构" style="width: 100%" />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem name="groupName" label="源库类型">
             <Select placeholder="资源类型" style="width: 100%">
              <Option label="内部" value="内部" />
              <Option label="公开" value="公开" />
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem name="resourceIp" label="中间件">
            <Input placeholder="请输入中间件" style="width: 100%" />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem name="groupName" label="详细应用调研信息">
            <Input placeholder="详细应用调研信息" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem name="resourceIp" label="特性或技术" :wrapperCol="{span: 24}" style="text-align: right">
            <!-- <Input placeholder="请输入特性或技术" style="width: 100%" /> -->
             <Transfer
              :dataSource="mockDataCom"
              :titles="['待选择的类型', '使用的类型']"
              :targetKeys="['demo1-1']"
            />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem name="groupName" label="详细数据库调研信息">
            <Input placeholder="详细数据库调研信息" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      目标信息
      <Row>
        <Col :span="12">
          <FormItem name="resourceIp" label="项目负责人">
            <Input placeholder="项目负责人" style="width: 100%" />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem name="groupName" label="厂商参与人员">
            <Input placeholder="厂商参与人员" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem name="resourceIp" label="项目负责人电话">
            <Input placeholder="项目负责人电话" style="width: 100%" />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem name="groupName" label="厂商负责人电话">
            <Input placeholder="厂商负责人电话" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12">
          <FormItem name="resourceIp1" label="目标产品">
            <Cascader
              style="width: 100%"
              v-model="modelValue"
              :options="options"
              @update:modelValue="updateModel"
            />
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem name="groupName" label="项目预期工期">
            <Input placeholder="项目预期工期" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="12" :offset="12">
          <FormItem name="groupName3" label="拟用解决方案">
            <Cascader
                  style="width: 100%"
                  v-model="modelValue"
                  :options="options"
                  @update:modelValue="updateModel"
                />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="24">
          <FormItem name="groupName" label="其他要求" :wrapperCol="wrapperColW" :labelCol="labelColW">
             <TextArea
              placeholder="请输入"
              style="width: 100%;"
              allowClear
              @input="onInput"
            />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="24">
          <FormItem :wrapperCol="24" style="text-align: center">
            <Button type="primary" size="md" style="width: 100px;">提交</Button>
            <Button style="margin-left: 20px;width: 100px;" size="md">重置</Button>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </Card>
</template>

<script>
export default {
  data() {
    return {
      labelCol: {
        span: 8,
      },
      labelColW: {
        span: 4,
      },
      wrapperCol: {
        span: 12,
      },
       wrapperColW: {
        span: 18,
      },
      mockData: [],
      modelValue: ['chongqing', 'xiushan'],
        options: [
          {
            value: '金仓股份有限公司',
            label: '金仓股份有限公司',
            children: [
              {
                value: 'v1.0企业版',
                label: 'v1.0企业版',
              },
               {
                value: 'v2.0企业版',
                label: 'v2.0企业版',
              },
               {
                value: 'v3.0企业版',
                label: 'v3.0企业版',
              },
            ],
          },
          {
            value: '达梦股份有限公司',
            label: '达梦股份有限公司',
            children: [
              {
                value: 'v1.0企业版',
                label: 'v1.0企业版',
              },
               {
                value: 'v2.0企业版',
                label: 'v2.0企业版',
              },
               {
                value: 'v3.0企业版',
                label: 'v3.0企业版',
              },
            ],
          },
         {
            value: '瀚高基础软件',
            label: '瀚高基础软件',
            children: [
              {
                value: 'v1.0企业版',
                label: 'v1.0企业版',
              },
               {
                value: 'v2.0企业版',
                label: 'v2.0企业版',
              },
               {
                value: 'v3.0企业版',
                label: 'v3.0企业版',
              },
            ],
          },
        ],
    };
  },
  computed: {
    mockDataCom() {
      for (let i = 0; i < 10; i += 1) {
      const item = (name) => {
        return {
          key: `${name}-${i.toString()}`,
          title: `集团法务部${i}`,
        };
      };
      this.mockData.push(item('demo1'));
      return this.mockData
      }
    }
  },
  methods: {
    onSearch(value, e) {
      console.log("value", value, e);
    },
    updateModel(val) {
        console.log('change', val);
    },
  },
};
</script>


